<template>
  <TmModal
    v-model:show="showModal"
    :title="modalTitle"
    cancel-text="取消"
    cancel-color="#969799"
    :mask="true"
    :height="300"
    :z-index="400"
    ok-color="primary"
    :ok-text="modalOkText"
    :ok-close="false"
    @ok="handleOk"
  >
    <template>
      <view class="hb-p-2 hb-rounded-lg hb-bg-[#F2F3F5] hb-flex hb-items-center hb-justify-between">
        <view class="hb-flex hb-items-center">
          <TmImage
            class="hb-flex-shrink-0 hb-mr-2"
            :src="activeItem?.iconFileUrl || ''"
            :width="80"
            :height="80"
            :round="4"
          ></TmImage>
          <TmText _class="text-overflow-1" :label="activeItem?.name" :font-size="28" />
        </view>
        <TmText
          v-if="dataList.length > 0"
          @click="showDrawer = true"
          class="hb-flex-shrink-0"
          label="切换"
          color="primary"
          :font-size="28"
        />
      </view>
    </template>
  </TmModal>
  <TmDrawer v-model:show="showDrawer" closeable hide-header title="选择智能助手" :height="1000">
    <view class="hb-p-4">
      <template v-for="item in dataList" :key="item.id">
        <view
          class="hb-p-3 hb-mb-4 hb-bg-white hb-rounded-lg hb-border hb-border-solid hb-border-transparent hb-flex hb-items-center hb-box-shadow-base"
          :style="{
            borderColor: item.id === activeId ? '#2878FF' : '',
          }"
          @click="handleSwitchAI(item)"
        >
          <view class="hb-w-12 hb-flex-shrink-0 hb-relative">
            <TmImage :src="item.iconFileUrl || ''" :width="96" :height="96" :round="4" />
            <view
              v-if="item.backlogNum > 0"
              class="hb-absolute hb--right-1 hb--top-1 hb-ml-2 hb-flex-shrink-0 hb-w-4 hb-h-4 hb-rounded-full hb-bg-[#EA5E0E] hb-flex hb-items-center hb-justify-center"
            >
              <text class="hb-text-white hb-text-[20rpx]">
                {{ item.backlogNum > 99 ? '99+' : item.backlogNum }}
              </text>
            </view>
          </view>
          <view class="hb-ml-3 hb-h-12 hb-flex-1 hb-flex hb-flex-col hb-justify-between">
            <view class="hb-flex hb-items-center">
              <TmText
                _class="hb-font-bold text-overflow-1 hb-mr-1"
                :label="item.name"
                :font-size="32"
              />
              <RoleTag
                v-if="item.roleType === RoleTypeEnum.SUPER_ADMIN"
                text="超级管理员"
                type="superAdmin"
              />
              <RoleTag v-else-if="item.roleType === RoleTypeEnum.ADMIN" text="管理员" type="admin" />
              <RoleTag v-else text="个人认证" type="member" />
            </view>
            <!-- 认证 -->

            <AuthenticationTag :certification-type="item.certificationType" />
          </view>
          <view class="hb-ml-3 hb-w-5 hb-h-10 hb-flex hb-items-center hb-justify-center">
            <CustomRadio v-if="item.id === activeId" :checked="true" />
          </view>
        </view>
      </template>
    </view>
  </TmDrawer>
</template>

<script setup lang="ts">
  import { aiAccountBotList, aiCutBot } from '@/api/aiSettings';
  import { AiAccountBotListResult } from '@/api/aiSettings/types';
  import { RoleTypeEnum } from '@/enums/LoginEnum';
  import { useUserStore } from '@/store/modules/user';

  const useUser = useUserStore();
  const { userInfo } = storeToRefs(useUser);

  const props = withDefaults(
    defineProps<{
      modelValue: boolean;
      modalTitle?: string;
      modalOkText?: string;
    }>(),
    {
      modelValue: false,
      modalTitle: '提示',
      modalOkText: '确定',
    },
  );

  const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void;
    (e: 'ok', data: AiAccountBotListResult): void;
  }>();

  const showModal = computed({
    get() {
      return props.modelValue;
    },
    set(value) {
      emit('update:modelValue', value);
    },
  });
  const showDrawer = ref(false);
  const activeId = ref<number>();
  const dataList = ref<AiAccountBotListResult[]>([]);
  const activeItem = computed(() => dataList.value.find((item) => item.id === activeId.value));

  aiAccountBotList().then((res) => {
    activeId.value = res.find((item) => item.uuid === userInfo.value?.aiUserAccountBotVo.uuid)?.id;
    dataList.value = res;
  });

  const handleSwitchAI = (item: AiAccountBotListResult) => {
    activeId.value = item.id;
    showDrawer.value = false;
    aiCutBot({ botId: item.id }).then(() => useUser.getUserInfo());
  };

  const handleOk = () => {
    emit('ok', activeItem.value!);
  };
</script>

<style scoped></style>
